<template>
   <div class="person">
     <ul>
       <li v-for="items in list" :key="items.id"><!--v-for 取值 key是唯一标识-->
         .{{items.name}} -- .{{items.age}}<br>
       </li>
     </ul>
   </div>
</template>
<!--TS 初始-->
<script lang="ts" setup name="Person">  //生效需要引入外部插件import VueSetupExtend  from 'vite-plugin-vue-setup-extend'
import {withDefaults} from 'vue'
import { type Persons} from "@/type";

//只接收list,这里接收的App.vue的Person标签中list是什么类型上面遍历就是上面类型
// defineProps(['list'])

//接收list同时保存props
// let x=defineProps(['list'])
// console.log(x.list)

//接收list限制类型
// defineProps<{list:Persons}>()

// 接收list+限制类型+限制必要性+指定默认值
withDefaults(defineProps<{list?:Persons}>(),{
  list:()=>[{id:'only',name:'默认值',age:99}]
})
</script>
<style scoped>
button{
  margin: 5px;
}
body{
  background-color: pink;
}
*{
  font-size: 30px;
  display: flex;
}
</style>